<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
    <script src="../src/data/trace/trace2/em.geometryutil.js"></script>
    <script src="../src/data/trace/trace2/markerTrack.js"></script>
	</head>
	<body>
		<div id="map"></div>
    <div class="input-card">
      <button onclick="start()">开始</button>
      <button onclick="pause()">暂停</button>
      <button onclick="stop()">停止</button>
    </div>
		<script type="text/javascript"  id="my_script">
      /*
        * 引入js文件
        * src="../src/data/trace/trace2/em.geometryutil.js"
        * src="../src/data/trace/trace2/markerTrack.js"
      */ 
     var L = window.L;
      var map = L.map('map', {
        center: [34.694,113.587],
        zoom: 6,
        crs: L.CRS.EPSG3857,
        layers: [
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
        ]
      });

      /**
			 * 开始轨迹回放的代码
			 */
      var path = [
        [34.694,113.587],[38.694,113.587],[37.694,115.587]
      ];
			// 运动的轨迹
			var polyline = L.polyline(path, { color: 'red' }).addTo(map);
			
			// 轨迹运动的图标
			var trace = L.marker([34.694,113.587],{icon:L.icon({
			        iconUrl:'../src/images/car.png',
			        iconAnchor: [24, 24],
			    })}).addTo(map);
			
			//添加一条线段也记录已经路过的点
			// var passed = L.polyline([[]],{color:'yellow'}).addTo(map);
			// trace.on('update_position',function (e) {
			//     //每次坐标更新。然后也更新路径
			//     passed.setLatLngs(e.path);
			// });
			
      // 开始运动
      function start() {
        trace.moveAlong(polyline, 200000);
      }
      // 暂停
      function pause() {
        trace.pauseMove()
      }
      // 停止
      function stop() {
        trace.stopMove()
      }
		</script>
	</body>
</html>
